<template>
  <div class="drawer-search">
    <div class="drawer-container">
      <input
        type="text"
        ref="input"
        placeholder="搜索"
        @input="(e) => {
          $emit('search', e.target.value)
        }"
      />
      <IconConfigProvider class="icon" color="gray" size="16">
        <Icon>
          <SearchSharp />
        </Icon>
      </IconConfigProvider>
    </div>
  </div>
</template>

<script>
import { SearchSharp } from "@v2icons/material"
import { Icon, IconConfigProvider } from "@v2icons/utils"
export default {
  name: "DrawerSearch",
  components: {
    SearchSharp,
    Icon,
    IconConfigProvider
  }
}
</script>

<style scoped>
.drawer-container {
  position: relative;
  width: 100%;
}
.drawer-search {
  display: flex;
  margin: 10px auto;
  text-align: center;
}
.drawer-search input {
  margin: 5px 10px;
  width: 90%;
  height: 1.5rem;
  border: none;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.1);
}
.drawer-search input:focus {
  border: none;
  outline: none;
}
.drawer-search .icon {
  position: absolute;
  top: 0;
  right: 1rem;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
}
</style>
